<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>现金应收应付设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 注意：项目正式环境请勿引用该地址 -->
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="layui/tableSelect.js"></script>
</head>
<body>


<!--表格上方的 工具条-->
<script type="text/html" id="secuityToolBar">
    <button class="layui-btn layui-btn-sm" lay-event="insert"><i
            class="layui-icon">&#xe654;</i>新增</button>
    <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
    <div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="search"><i class="layui-icon layui-icon-search"></i></div>
    <input type="text" id="cashAccrualStockId"  style="width:200px;float:right;height:30px;" placeholder="请输入现金应收应付的名称" autocomplete="off" class="layui-input">

    <div style="float:right;height:29px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
    <input type="text" id="dateAccrualStock"  style="width:150px;float:right;height:30px;" placeholder="统计日期" autocomplete="off" class="layui-input">

</script>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var $  = layui.$;//jquery
        var layer= layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        tableSelect = layui.tableSelect;
        laydate.render({
            elem: '#date'
        });


        //查询
        table.render({
            height: 'full-55'
            , minLength: 80
            ,elem: '#cashAccrualStock'
            , id: 'tableId'
            , url: 'selectCashAccrualStock'
            , toolbar: '#secuityToolBar'
            ,limits:[2,4,6,8,10]
            , title: '证券数据表'
            , cols: [[
                {field: 'cashAccrualStockId', title: '现金应收应付库存Id',edit: 'text',sort: true}
                , {field: 'cashId', title: '现金账号ID', edit: 'text',hide: true}
                , {field: 'accountName', title: '现金账号名称', edit:'text'}
                , {field: 'dateAccrualStock', title: '统计日期', edit:'text'}
                , {field: 'businessType', title: '业务类型', templet: function(item){
                        if(item.businessType=='1') {return '管理费';
                        } else if(item.businessType=='2'){ return '托管费';
                        }else if (item.businessType=='3'){return '存款利息';
                        }else if (item.businessType=='4'){
                            return '申购赎回费';
                        }
                    }}
                , {field: 'businessState', title: '业务状态',templet: function(item){
                        if(item.businessState=='1') {return '流入';
                        } else if(item.businessState=='2'){ return '流出';
                        }
                    }}
                , {field: 'money', title: '总金额', edit: 'text'}
                , {field: 'initialState', title: '期初状态',templet: function(item){
                        if(item.initialState=='1') {return '是';
                        } else if(item.initialState=='2'){ return '否';
                        }
                    }}
                ,{field: 'remark',title : '备注' , edit :'text' }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true
        });
        laydate.render({
            elem: '#dateAccrualStock'
        });
        // //给工具栏绑定事件
        table.on('toolbar(cashAccrualStock)',function (obj) {
            //根据事件对象 来判定点击的是哪一个案例
            if(obj.event=='insert'){
                //alert('增加事件触发');
                //iframe层
                layer.open({
                    type: 1,
                    title: '添加证券库存信息',
                    area : [ '60%',
                        '400px' ],
                    content:$("#addContent")
                });
            }else if(obj.event=='deleteAll'){
                alert('删除事件触发');
            }else if(obj.event=='search'){
                var cashAccrualStockId = $("#cashAccrualStockId").val();
                var dateAccrualStock = $("#dateAccrualStock").val();
                //表格的重新加载事件
                table.reload('tableId', {
                    url: 'selectCashAccrualStock',
                    method: 'post'
                    , where: {
                        'cashAccrualStockId':cashAccrualStockId,
                        'dateAccrualStock':dateAccrualStock
                    }
                    ,  page: {
                        curr: 1
                    }
                });
                laydate.render({
                    elem: '#dateAccrualStock'
                });
                //回反，给搜索框赋值
                $('#cashAccrualStockId').val(cashAccrualStockId);
                $('#dateAccrualStock').val(dateAccrualStock);
            }
        });
        //给最右边的列 添加事件
        table.on('tool(cashAccrualStock)',function (obj) {
            switch (obj.event) {
                case "edit":
                    //得到选中行的数据
                    var data=obj.data;
                    //JSON.stringify(data)  拼接成JSON格式的字符串
                    var bookObj=$.parseJSON(JSON.stringify(data));
                    //弹出一个修改的窗口
                    form.val("editform",bookObj);
                    layer.open({
                        type:1, //iframe 内嵌窗口
                        title: '修改基金设置信息',
                        area:['60%','450px'],
                        content: $("#editContent")
                    });
                    break;
                case "del":
                    // alert("这是删除的操作");
                    alert("选中的行：" + obj.data.cashAccrualStockId);
                    layer.confirm('您确定要删除吗?',function (index) {
                        layer.close(index);
                        //发送请求到服务器执行删除操作

                        $.post("deleteCashAccrualStock?cashAccrualStockId="+ obj.data.cashAccrualStockId, function () {
                            //回调函数，刷新表格数据
                            //table 表格重新加载  刷新页面
                            table.reload('tableId', {
                                method: 'post'
                                , where: {

                                }
                                , page: {
                                    curr: 1
                                }
                            });
                        });
                    });
                    break;
            }
        });
        //给增加的form绑定提交事件
        form.on('submit(addsubmit)',function () {
            alert("新增表单提交");
            //发送ajax请求到 服务器，
            //得到表单的所有数据
            var data= form.val("addform");
            // alert('data=' + data);
            $.post(
                "insertCashAccrualStock",//异步请求的路径
                data,//异步请求 发送数据
                function(msg) {//回调函数  处理 服务器响应过来的数据，来进行页面提示
                    //重新刷新表格
                    //给予提示信息，增加成功
                    // alert(msg);
                    if(msg==0){
                        alert('增加失败');
                    }else {
                        alert('增加成功');
                        table.reload("tableId");
                    }
                });
        });
        //给修改的form绑定提交事件
        form.on('submit(editform)',function () {
            alert("修改表单提交")
            //发送ajax请求到 服务器，
            //得到表单的所有数据
            var data= form.val("editform");
            // alert('data=' + data);
            $.post(
                "updateCashAccrualStock",
                data,
                function(msg) {
                    //重新刷新表格
                    //给予提示信息，修改成功
                    // alert(msg);
                    if(msg==0){
                        alert('修改失败');
                    }else {
                        alert('修改成功');
                    }
                });
        });
        tableSelect.render({
            elem: '#cashId',
            checkedKey: 'cashId',
            table: {
                url: 'selectCash',
                cols: [
                    [
                        {type: 'radio', fixed: 'left'}
                        , {field: 'cashId', title: '现金账号Id', edit: 'text', align:'center'}
                        , {field: 'accountName', title: '账户名称', edit: 'text', align:'center'}
                    ]]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.cashId)
                    $("#cashNameZ").val(item.cashId)
                });
                elem.val(NEWJSON.join(","))
            }
        });

        tableSelect.render({
            elem: '#cashId2',
            checkedKey: 'cashId',
            table: {
                url: 'selectCash',
                cols: [
                    [
                        {type: 'radio', fixed: 'left'}
                        , {field: 'cashId', title: '现金账号Id', edit: 'text', align:'center'}
                        , {field: 'accountName', title: '账户名称', edit: 'text', align:'center'}
                    ]]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.cashId)
                    $("#cashNameX").val(item.cashId)
                });
                elem.val(NEWJSON.join(","))
            }
        });
    });
</script>
<!--表格-->
<table id="cashAccrualStock" lay-filter="cashAccrualStock"></table>
<!--表格最后一列的操作按钮的工具栏-->
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i
            class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon">&#xe640;</i>删除</a>
</div>

<!--增加的div内容-->
<div id="addContent" style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="addform" lay-filter="addform" class="layui-form layui-form-pane" style="margin: 30px auto; display: inline-block;">

        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">现金账号ID</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" autocomplete="off" placeholder="请输入现金账号ID" class="layui-input" name="cashId" id="cashId">
                <input type="hidden" id="cashNameZ">
            </div>

            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">统计日期</label>
            <div class="layui-input-inline">
                <input type="date" lay-verify="required" name="dateAccrualStock"
                       autocomplete="off" placeholder="请输入统计日期" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">业务类型</label>
            <div class="layui-input-inline">
                <select name="businessType">
                    <option placeholder="请选择"></option>
                    <option value="1">管理费</option>
                    <option value="2">托管费</option>
                    <option value="3">存款利息</option>
                    <option value="4">申购赎回费</option>
                </select>
            </div>

            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">业务状态</label>
            <div class="layui-input-inline">
                <select name="businessState">
                    <option placeholder="请选择"></option>
                    <option value="1">流入</option>
                    <option value="2">流出</option>
                </select>
            </div>

        </div>

        <div class="layui-form-item" style="text-align: center;">

            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">总金额</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required" name="money"
                       autocomplete="off" placeholder="请输入总金额" class="layui-input">
            </div>


            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">期初状态</label>
            <div class="layui-input-inline">
                <select name="initialState">
                    <option placeholder="请选择"></option>
                    <option value="1">是</option>
                    <option value="2">否</option>
                </select>
        </div>
            </div>

        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">备注</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required"
                       autocomplete="off" placeholder="请输入备注" class="layui-input" name="remark">
            </div>
            </div>



        <div class="layui-form-item" style="position: absolute;left: 28%; bottom: 20px">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addsubmit"><i class="layui-icon">&#x1005;</i>添加</button>
                <button type="reset" class="layui-btn layui-btn-primary"> <i class="layui-icon">&#x1006;</i>取消</button>
            </div>
        </div>
        <!--        <div style="position: absolute; bottom: 0px; left: 45%;">-->
        <!--            &lt;!&ndash;lay-submit="" 具备提交功能  lay-filter   具有筛选作用&ndash;&gt;-->
        <!--            <button class="layui-btn" lay-submit="" lay-filter="addsubmit">-->
        <!--                <i class="layui-icon">&#x1005;</i>添加-->
        <!--            </button>-->
        <!--            <button class="layui-btn layui-bg-red cancel" type="button">-->
        <!--                <i class="layui-icon">&#x1006;</i>取消-->
        <!--            </button>-->
        <!--        </div>-->
    </form>
</div>

<!--修改的div内容-->
<div id="editContent"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="editform" lay-filter="editform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">

        <div class="layui-form-item" style="text-align: center;">

            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">现金应收应付库存Id</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required"
                       autocomplete="off" placeholder="请输入现金应收应付库存Id" class="layui-input" name="cashAccrualStockId">
            </div>

            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 50px">现金账号ID</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required"
                       autocomplete="off" placeholder="请输入现金账号ID" class="layui-input" name="cashId" id="cashId2">
                <input type="hidden" id="cashNameX">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">

            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 35px;">统计日期</label>
            <div class="layui-input-inline">
                <input type="date" lay-verify="required" name="dateAccrualStock"
                       autocomplete="off" placeholder="请输入统计日期" class="layui-input">
            </div>

            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 50px">业务类型</label>
            <div class="layui-input-inline">
                <select name="businessType">
                    <option placeholder="请选择"></option>
                    <option value="1">管理费</option>
                    <option value="2">托管费</option>
                    <option value="3">存款利息</option>
                    <option value="4">申购赎回费</option>
                </select>

            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 35px;">业务状态</label>
            <div class="layui-input-inline">
                <select name="businessState">
                    <option placeholder="请选择"></option>
                    <option value="1">流入</option>
                    <option value="2">流出</option>
                </select>
            </div>

            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 50px">总金额</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required" name="money"
                       autocomplete="off" placeholder="请输入总金额" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 35px;">期初状态</label>
            <div class="layui-input-inline">
                <select name="initialState">
                    <option placeholder="请选择"></option>
                    <option value="1">是</option>
                    <option value="2">否</option>
                </select>
            </div>

            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 50px">备注</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required"
                       autocomplete="off" placeholder="请输入备注" class="layui-input" name="remark">
            </div>
        </div>



        <div class="layui-form-item" style="position: absolute;left: 28%; bottom: 20px">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addsubmit"><i class="layui-icon">&#x1005;</i>修改</button>
                <button type="reset" class="layui-btn layui-btn-primary"> <i class="layui-icon">&#x1006;</i>取消</button>
            </div>
        </div>
        <!--        <div style="position: absolute; bottom: 0px; left: 45%;">-->
        <!--            &lt;!&ndash;lay-submit="" 具备提交功能  lay-filter   具有筛选作用&ndash;&gt;-->
        <!--            <button class="layui-btn" lay-submit="" lay-filter="editsubmit">-->
        <!--                <i class="layui-icon">&#x1005;</i>修改-->
        <!--            </button>-->
        <!--            <button class="layui-btn layui-bg-red cancel" type="button">-->
        <!--                <i class="layui-icon">&#x1006;</i>取消-->
        <!--            </button>-->
        <!--        </div>-->
    </form>
</div>
</body>
</html>
